<template>
  <view class="content"
    v-if="info.fUserName">
	<u-navbar :is-back="false" title="订单详情"
	  title-size="30"
	  :background="{background:'#2B88FE' }"
	  title-color="#fff">
	  <div class="head_icon">
	    <u-icon @click="$api.handleBackTo"
	      name="arrow-left" color="#fff"
	      size="36">
	    </u-icon>
	    <u-icon @click="$api.handleHomeTo"
	      name="home" color="#fff" size="36">
	    </u-icon>
	  </div>
	</u-navbar>
    <view
      class="topBox whiteBg u-skeleton">
      <view
        class="store borderBottom x-row"
        @click="gotoStoreIndex">
        <image
          :src="$api.MrkImg(info.fMrkId)"
          class="simg x-col-center u-skeleton-circle">
        </image>
        <view
          class="x-col sname x-col-center u-skeleton-rect">
          {{info.fMrkName}}
          <view class="khmc">
            联系电话：{{info.fTell}}
          </view>
        </view>
        <view
          class="status x-col-center">
        <!--  <view
            :class="info.fPayStatus==1?'wei':'yi'">
            {{$api.getPayStatus(info.fPayStatus)}}
          </view>-->
          <view
            v-if="action=='order'"
            :class="info.fStatus==10?'yi':'wei'">
            {{$api.getOrderStatus(info.fStatus)}}
          </view>
          <view v-else
            :class="info.fStatus==10?'yi':'wei'">
            {{$api.getTaskStatus(info.fStatus)}}
          </view>
        </view>
      </view>
      <view
        class="info  x-row">
        <view class="x-col">
          <view
            class="itxt u-skeleton-rect">
            <view class="s1">
              进货单号</view>
            {{info.fOrderNo}}
          </view>
          <view
            class="itxt u-skeleton-rect">
            <view class="s1">
              应付款</view>¥
            {{info.fMoney}}
            <view class="yhj"
              v-if="fPriceType">
              {{priceType}}
            </view>
          </view>

          <view
            class="itxt u-skeleton-rect">
            <view class="s1">
              提交时间</view>
            {{info.fCreateTime}}
          </view>
          <view
            class="itxt u-skeleton-rect"
            v-if="info.desc">
            <view class="s1">
              审核说明</view>
            {{info.desc}}
          </view>

        </view>
      </view>

    </view>
    <view class="h16"></view>
    <view
      class="topheader u-skeleton-rect">
      <view class="x-row">
        <view
          class="titel x-col">
          销售人员</view>
        <view
          class="rightimg x-col-center"
          style="padding-right: 40rpx;">
          <image
            :src="`${img}images/user/${item.fUserId}.jpg`"
            v-for="(item,index) in info.OrderSellUserList"
            :key="index"
            class="img60">
          </image>
        </view>
        <u-icon
          name="arrow-right"
          color="#979797"
          size="26rpx">
        </u-icon>
      </view>
    </view>
    <view
      class="topheader x-row "
      style="border: 0;"
      @click="imgshow">
      <view
        class="titel x-col">
        订单凭证</view>
      <view
        class="upimg x-col-center">
        <view class="addBtn">
          查看图片</view>
      </view>
      <u-icon
        name="arrow-right"
        color="#979797"
        size="26rpx"
        class="x-col-center">
      </u-icon>
    </view>
    <view class="h16"></view>
    <!-- <view class="topheader ">
			<navigator class="x-row" url="./personnellist_show" hover-class="none">
				<view class="titel x-col">司机人员</view>
				<view class="rightimg x-col-center">
					<image src="../../static/logo.png" v-for="(item,index) in 3" :key="index" class="img60"></image>
				</view>
				<u-icon name="arrow-right" color="#979797" size="26rpx"></u-icon>
			</navigator>
		</view> -->
    <approval
      :list="info.admin"
      :now_id="info.now_id">
    </approval>
    <view class="h16"
      v-if="info.admin">
    </view>
    <view
      class="interval u-skeleton-rect">
      进货商品</view>
    <view class="listgoods"
      v-for="(g,index) in info.OrderProList"
      :key="index">
      <view class="x-row">
        <image
          :src="`${img}images/product/${g.fProId}.jpg`"
          class="goodsimg ">
        </image>
        <view class="x-col">

          <view
            class="goodstitel ">
            {{g.fProName}}
          </view>
        <view class="nuber">
            单位： {{g.fUnit}} 
          </view>
          <view class="nuber">
            购买数量：{{g.fCount}}   <span  v-if="g.fCoverCount>0 || g.fGiveCount>0 || g.fExcCount>0"> 
			 (<span v-if="g.fCoverCount>0"> 盖子：{{g.fCoverCount}}  &#32&#32  &#32&#32 </span> 
			  <span v-if="g.fGiveCount>0">搭赠：{{g.fGiveCount}}  &#32&#32  &#32&#32  </span> 
			  <span v-if="g.fExcCount>0">调换：{{g.fExcCount}}</span> )</span>  
          </view>
	  
          <view class="nuber"
            v-if="info.fDeyStatus==1">
            车上库存：{{g.fBeCount}}
          </view>
          <!--判断是配送者才显示这个一个项，如果不是不显示 如果不是不显示 fDeyUserId 这个字段和当前用户是同一个值-->
          <view class="x-row">
            <view
              class="time">
              价格：{{g.fPrice}}
            </view>
            <view
              class="x-col">
            </view>
            <view
              class="prme">
              ¥{{g.fMoney}}
            </view>
          </view>
        </view>
      </view>
    </view>
 
    <u-skeleton
      :loading="loading"
      :animation="true"
      bgColor="#FFF">
    </u-skeleton>
	
	<div class="footer">
	  <u-button  class="u-btn"   v-if="info.fDeyStatus==1"  @click="handleCancel">返回</u-button>
	  <u-button  class="u-btn"  type="primary"    v-if="info.fDeyStatus==1" @click="handleSave">认领</u-button>
	</div>
	
	
  </view>
</template>

<script>
import approval from '../../components/approval'
export default {
  components: {
    approval
  },
  data() {
    return {
      showPayHistory: false,
      PriceType: [
        {
          label: '现金',
          value: 0
        },
        {
          label: '微信',
          value: 1
        },
        {
          label: '银行转账',
          value: 2
        }
      ],
      payInfo: {
        OrderId: 0,
        PayType: 0,
        PayInfo: '',
        PayPic: '',
        PayMoney: ''
      },
      img: this.urlimg,
      height: this.but_height(),
      dats: new Date(),
      taskId: '',
      id: '',
      info: {},
      showPay: false,
      prc: '',
      action: '', //sj 司机 表示只查看，只能支付
      utype: '',
      show: false,
      loading: true
    }
  },
  onLoad(e) {
    this.id = e.id
    this.taskId = e.taskId
    this.action = e.status
    if (e.status === 'order') {
      uni.setNavigationBarTitle({
        title: '订单详情'
      })
    } else {
      uni.setNavigationBarTitle({
        title: '配送任务详情'
      })
    }
    this.orderInfo()
  },
  methods: {
    confirm(e) {
      this.payInfo.PayType = e[0].value
    },

    gotoStoreIndex() {
      uni.navigateTo({
        url: '/pages/my_customer/my_customer_client?id=' + this.info.fMrkId + '&taskId=' + this.taskId
      })
    },
    // pay/pay 			常规订单支付
    handleSave() {
      let str = this.str
      this.$api.modelMessage(`订单配送认领`, `确认认领吗？`).then(() => {
        let info = { id: this.id, DoType: 10 }
        this.$axios('api/OrderBasic/ConfirmTaskDetail', 'post', { value: this.id }).then(res => {
			if (!res.Success) {
			  uni.showToast({
			    title: '提交失败：'+res.Message,
			    icon: 'none',
			    duration: 2000
			  })
			  return false
			}
        //  this.$api.handleBack(`订单配送认领成功`)
		   this.$api.handleToUrl(`订单配送认领成功`,'FindTaskList')
        })
      })
    },
	handleCancel() {
	  this.$api.navigator('FindTaskList')
	},
    topayDetail() {
      this.$api.navigator('payDetail?id=' + this.id)
    },
    // order/OrderInfo 			订单详情
    orderInfo() {
      let that = this
      that.loading = true
      this.$axios('api/OrderBasic/GetAllDetail', 'post', { value: this.id })
        .then(res => {
          if (res.Value) {
            this.payInfo.OrderId = res.Value.fId
            that.info = res.Value
            that.loading = false
          }
        })
        .then(() => {
          if (Number(this.taskId)) {
            this.$axios('api/CarDeyTask/GetDetail', 'post', { value: this.taskId }).then(res => {
              that.info.fStatus = res.Value.fStatus
            })
          }
        })
    },
    imgshow() {
      let arr = [this.urlimg + this.info.fPic]
      uni.previewImage({
        urls: arr,
        current: arr[0]
      })
    }
  },
  computed: {
    fPriceType() {
      let i = this.info.fPriceType
      if (i == 2) return '折扣价'
      else if (i == 3) return 'Vip价'
      else return ''
    },
    payImgText() {
      let num = this.payInfo.PayPic
      return num ? num.length : 0 + '张凭借'
    }
  },
  onShow() {
    if (getApp().globalData.sureSelectImg) {
      this.payInfo.PayPic = getApp().globalData.sureSelectImg
    }
  }
  //onHide:{},  //监听页面隐藏
  //onUnload:{},	//监听页面卸载
  //onPullDownRefresh:{},  //监听用户下拉动作，一般用于下拉刷新  page.json  "enablePullDownRefresh":true,//开启下拉刷新
  //onReachBottom:{}, //页面滚动到底部
  //onShareAppMessage:{}, 用户点击右上角分享
}
</script>

<style scoped lang="scss">
.h16 {
  height: 16rpx;
  background-color: #f5f7f9;
}
.status {
  font-size: 32rpx;
  color: #007aff;
  padding-left: 10rpx;
}
.slot-content {
  padding: 24rpx 48rpx;
  box-sizing: border-box;
  .priceipt {
    background: #f8f9fc;
    padding: 0 20rpx;
    box-sizing: border-box;
    height: 80rpx;
    line-height: 80rpx;
    font-size: 28rpx;
  }
  .ts {
    font-size: 24rpx;
    font-weight: 400;
    color: #999999;
    line-height: 36rpx;
    // margin-bottom: 32rpx;
  }
}
.topBox {
  .info {
    padding: 32rpx 32rpx 16rpx 32rpx;
    box-sizing: border-box;

    .itxt {
      padding-bottom: 16rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: #34404a;
      line-height: 40rpx;

      .s1 {
        width: 160rpx;
        color: #979797;
        font-size: 32rpx;
        display: inline-block;
      }

      .yhj {
        width: 96rpx;
        height: 40rpx;
        text-align: center;
        border-radius: 20rpx;
        display: inline-block;
        line-height: 40rpx;
        border: 2rpx solid #2b88fe;
        font-size: 28rpx;
        color: #2b88fe;
        margin-left: 16rpx;
      }

      .mingxi {
        font-weight: 400;
        color: #2b88fe;
        line-height: 42rpx;

        .iconfont {
          font-size: 25rpx;
        }

        display: inline-block;
        margin-left: 16rpx;
      }
    }
  }

  .store {
    padding: 24rpx 32rpx;
    box-sizing: border-box;

    .simg {
      width: 96rpx;
      height: 96rpx;
      margin-right: 16rpx;
      background-color: #f2f2f2;
      border-radius: 10rpx;
    }

    .sname {
      font-size: 36rpx;
      font-weight: 500;
      color: #333333;
      line-height: 36rpx;
      padding: 0 20rpx 0 0;
    }

    .khmc {
      padding-top: 10rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: #999999;
    }

    .pay {
      width: 144rpx;
      height: 64rpx;
      line-height: 64rpx;
      text-align: center;
      font-size: 28rpx;
      font-weight: 400;
      color: #1677ff;
      border-radius: 32rpx;
      border: 1rpx solid #2b88fe;
    }

    .iconyou {
      color: #999999;
    }
  }
}

.topheader {
  padding: 0 32upx;
  border-bottom: 1px solid rgba(0, 0, 0, 0.09);
}

.titel {
  color: #34404a;
  font-size: 32upx;
  padding: 32upx 0;
}

.img60 {
  width: 60upx;
  height: 60upx;
  border-radius: 30upx;
}

.img60:nth-child(1) {
  transform: translateX(60upx);
}

.img60:nth-child(2) {
  transform: translateX(30upx);
}

.imgadd {
  width: 26upx;
  height: 26upx;
  display: block;
}

.bu_text {
  color: #2b88fe;
  font-size: 28upx;
  padding-left: 10upx;
}

.addBtn {
  color: #999;
}

.price {
  color: #eb3e00;
  font-size: 32upx;
}

.label {
  color: #2b88fe;
  border: 1px solid #2b88fe;
  padding: 3upx 10upx;
  border-radius: 30upx;
  font-size: 24upx;
  margin-left: 10upx;
}

.interval {
  color: #333;
  font-size: 32upx;
  line-height: 110upx;
  padding: 0 32upx;
}

.listgoods {
  padding: 32upx;
  border-bottom: 1px solid #f8f8f8;
}

.goodsimg {
  width: 144upx;
  height: 144upx;
  display: block;
  margin-right: 24upx;
}

.goodstitel {
  color: #000;
  font-size: 32upx;
}

.rights {
  color: #000;
  font-size: 333;
  font-size: 32upx;
}

.nuber {
  color: #666;
  font-size: 28upx;
  padding-top: 10upx;
}

.time {
  color: #666;
}

.prme {
  color: #000;
  font-size: 32upx;
  font-weight: bold;
}

.viewbbutton {
  position: fixed;
  bottom: 0;
  background: #fff;
  width: 100%;
  .x-row {
    display: flex;
    justify-content: center;
    ::v-deep button {
      margin: 0 20rpx;
    }
  }
}

  .footer {
    margin-top: 32rpx;
    display: flex;
    justify-content: center;
    position: sticky;
    bottom: 2%;
    u-button,
    .u-btn {
      width: 40%;
    }
    u-button + u-button {
      margin-left: 30rpx;
    }
  }
  
.buttom {
  width: 95%;
  background: #007aff;
  border-radius: 16upx;
  text-align: center;
  line-height: 80upx;
  margin: auto;
  margin-top: 10upx;
  color: #fff;
  font-size: 32upx;
}
.leftbut {
  border: 1px solid #999;
  text-align: center;
  font-size: 32upx;
  color: #333;
  line-height: 80upx;
  border-radius: 16upx;
}
.right {
  border-color: #007aff;
  color: #fff;
  background: #007aff;
}
u-button + u-button {
  margin-left: 10rpx;
}
</style>
